﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>全塑智联MES-成品出货看板</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>
<style>
    .chart {
        height: 45%;
        display: flex;
        padding-left: 0.2rem;
    }

    #stockCompletionRate {
        width: 20%;
        height: 100%;
    }

    #stockOutRate {
        width: 20%;
        height: 100%;
    }

    #dailyStockOutFinishRateTrendChart {
        width: 60%;
        height: 100%;
    }
</style>
<body>
<div class="loading">
    <div class="loadbox"><img src="images/loading.gif" alt=""> 页面加载中...</div>
</div>
<div class="head">
    <div style="display:inline;">
        <h1>成品出货看板</h1>
    </div>
    <div id="orderCode" style="display:inline; float:left;font-size: .2rem; width: 25%; margin-left:.8rem;">
    </div>

    <div id="showTime" style="display:inline; float:right;font-size: .2rem;  margin-right: 1.5rem ;"></div>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="width: 19.5rem;height: 4.5rem;overflow:hidden;padding:0;">
                <div class="tit04">成品出货情况</div>
                <div class="listhead listhead2">
                    <span>出货日期</span>
                    <span>销售单号</span>
                    <span>产品编码</span>
                    <span>产品名称</span>
                    <span>需出货数量</span>
                    <span>备货数量</span>
                    <span>已出货数量</span>
                </div>
                <div id="outDiv1" style="width: 19.5rem; height:calc(100% - .55rem);">
                    <div id="outDiv2" class="nav04">
                        <div id="data_tbody" class="listnav listnav2">
                            <ul class="smjl" id="productionOutDetailList">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <div class="chart">
        <div id="stockCompletionRate">

        </div>
        <div id="stockOutRate">

        </div>
        <div id="dailyStockOutFinishRateTrendChart"></div>
    </div>
</div>


<script type="text/javascript" src="js/echarts.min.js"></script>
<script src="js/jquery.liMarquee.js"></script>
<script type="text/javascript" src="js/jquery.countup.min.js"></script>
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="js/init_screen.js"></script>
<script type="text/javascript" src="js/showTime.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<!-- 滚动表格js -->
<script type="text/javascript">
    /*
        _S1,_S2是滚动内容区域外的两个DIV的ID
        如
        <div id="_S1">
        <div id="_S2">
        _W为滚动内容的宽度
        _H为滚动内容的高度
        _T为滚动后每次停留言时间
        */
    const isScroll = true;

    function _InitScroll(_S1, _S2, _W, _H, _T) {
        if (!isScroll) {
            return false;
        }
        marqueesHeight = _H;
        stopScroll = false;
        scrollElem = document.getElementById(_S1);
        scrollTable = document.getElementById('data_tbody');
        if (scrollTable.offsetHeight < marqueesHeight) {
            return;
        }
        with (scrollElem) {
            style.width = _W;
            style.height = marqueesHeight;
            style.overflow = 'hidden';
            noWrap = true;
        }
        pauseTime = _T;
        setTimeout('init_srolltext()', 1000);
        init_srolltext();
    }

    function init_srolltext() {
        scrollElem.scrollTop = 0;
        scrollIntervalId = setInterval('scrollUp()', 75);
    }

    function scrollUp() {
        if (stopScroll) {
            return;
        }
        let preTop = scrollElem.scrollTop;
        scrollElem.scrollTop += 1;
        if (preTop == scrollElem.scrollTop) {
            scrollElem.scrollTop = 0;
            scrollElem.scrollTop += 0.5;
        }
    }

    var _contentHeight = $(window).height() * 0.9;
    $("#outDiv2").height(_contentHeight - _contentHeight * 0.10 * 2 - 2);
    _InitScroll('outDiv1', 'outDiv2', $("#data_tbody").width(), 22, 1000 * 10)
</script>

<script type="text/javascript">
    window.onload = function () {

        initTableData()
    }

    function initTableData() {
        let token = GetQueryString('token');
        $.ajax({
            url: '/erupt-api/watchBoard/productionOut',
            type: 'get',
            headers: {
                'Token': `${token}`
            },
            dataType: 'json',
            success: (res) => {
                let dayProductionOutFinishedRate = res.dayProductionOutFinishedRate;
                let dayProductionInFinishedRate = res.dayProductionInFinishedRate;
                let dailyProductionOutFinishedRateTrendOfCurrentMonth = res.dailyProductionOutFinishedRateTrendOfCurrentMonth;
                let productionOutDetailVOList = res.productionOutDetailVOList;

                let productionOutDetailList = $('#productionOutDetailList');
                productionOutDetailList.empty();
                let items = '';
                for (const record of productionOutDetailVOList) {
                    let item = '<li>';
                    for (let key in record) {
                        if (record[key] === 0) {
                            record[key] = '0';
                        } else {
                            record[key] = !record[key] ? '' : record[key];
                        }
                        item += `<span style="font-size: .18rem">${record[key]}</span>`;
                    }
                    item += '</li>';
                    items += item;
                }
                productionOutDetailList.append(items);

                initEchartPieOptions({
                    dayProductionOutFinishedRate: dayProductionOutFinishedRate,
                    dayProductionInFinishedRate: dayProductionInFinishedRate,
                    dailyProductionOutFinishedRateTrendOfCurrentMonth: dailyProductionOutFinishedRateTrendOfCurrentMonth
                });
            },
            error: function (xhr, errorText, errorType) {
                console.log(errorText)
            }
        });
    }

    function getDaysInMonth() {
        const currentDate = new Date();
        const currentYear = currentDate.getFullYear();
        const currentMonth = currentDate.getMonth() + 1;
        const daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
        return Array.from({length: daysInMonth}, (_, i) => i + 1);
    }

    const completionRateList = [75, 82, 68, 91, 63, 77, 85, 72, 79, 88, 76, 82, 68, 91, 63, 77, 85, 72, 79, 88, 76, 82, 68, 91, 63, 77, 85, 72, 79, 88, 76]

    function initEchartPieOptions(data) {
        if (!data) {
            return;
        }

        const stockCompletionRateChart = echarts.init(document.getElementById('stockCompletionRate'));
        const stockOutRateChart = echarts.init(document.getElementById('stockOutRate'));
        const dailyStockOutFinishRateTrendChart = echarts.init(document.getElementById('dailyStockOutFinishRateTrendChart'));
        // 当日备货完成率饼状图
        let pie1Options = {
            title: {
                text: '当日备货完成率',
                textStyle: {
                    color: '#fff',
                    fontSize: 30
                },
            },
            tooltip: {
                // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
                trigger: 'item',
                showDelay: 10,   // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                hideDelay: 20,   // 隐藏延迟，单位ms
                backgroundColor: 'rgba(52,134,218,.7)',  // 提示框背景颜色
                textStyle: {
                    fontSize: 32,
                    color: '#fff'  // 设置文本颜色 默认#FFF
                },
                pointer: {              // 仪表盘指针。
                    show: true,             // 是否显示指针,默认 true。
                    length: "70%",          // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                    width: 5                // 指针宽度,默认 8
                },
                // formatter设置提示框显示内容
                // {a}指series.name  {b}指series.data的name
                // {c}指series.data的value  {d}%指这一部分占总数的百分比
                // formatter: '{a} <br/>{b} : {c}个 ({d}%)'
                // formatter: '{b}（{c}%）'
                formatter: function (params) {
                    return `${params.name} （${Number(params.value).toFixed(2)}%）`;
                }

            },
            series: [{
                type: 'gauge',
                data: [{
                    name: '备货完成率',
                    value: data.dayProductionInFinishedRate
                }],
                title: {
                    show: false
                },
                detail: {
                    formatter: function (value, params) {
                        return value.toFixed(2) + '%';
                    }
                },
                pointer: {              // 仪表盘指针。
                    show: true,             // 是否显示指针,默认 true。
                    length: "70%",          // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                    width: 20
                },// 指针宽度,默认 8
                clockwise: true,        // 仪表盘刻度是否是顺时针增长,默认 true。
                min: 0,                 // 最小的数据值,默认 0 。映射到 minAngle。
                max: 100,               // 最大的数据值,默认 100 。映射到 maxAngle。
                startAngle: 225,        // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                endAngle: -45,          // 仪表盘结束角度,默认 -45
                color: ['#6ab2ec', '#85a6a9', 'rba(37,66,144)']
            }]
        }

        // 当日出货完成率仪表盘
        let pie2Options = {
            title: {
                text: '当日出货完成率',
                textStyle: {
                    color: '#fff',
                    fontSize: 30
                },
            },
            tooltip: {
                // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
                trigger: 'item',
                showDelay: 10,   // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                hideDelay: 20,   // 隐藏延迟，单位ms
                backgroundColor: 'rgba(52,134,218,.7)',  // 提示框背景颜色
                textStyle: {
                    fontSize: 32,
                    color: '#fff'  // 设置文本颜色 默认#FFF
                },
                pointer: {              // 仪表盘指针。
                    show: true,             // 是否显示指针,默认 true。
                    length: "70%",          // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                    width: 5                // 指针宽度,默认 8
                },
                // formatter设置提示框显示内容
                // {a}指series.name  {b}指series.data的name
                // {c}指series.data的value  {d}%指这一部分占总数的百分比
                // formatter: '{a} <br/>{b} : {c}个 ({d}%)'
                // formatter: '{b}（{c}%）'
                formatter: function (params) {
                    return `${params.name} （${Number(params.value).toFixed(2)}%）`;
                }
            },
            series: [{
                type: 'gauge',
                data: [{
                    name: '出货完成率',
                    value: data.dayProductionOutFinishedRate
                }],
                title: {
                    show: false
                },
                detail: {
                    formatter: function (value, params) {
                        return value.toFixed(2) + '%';
                    }
                },
                pointer: {              // 仪表盘指针。
                    show: true,             // 是否显示指针,默认 true。
                    length: "70%",          // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                    width: 20
                },// 指针宽度,默认 8
                clockwise: true,        // 仪表盘刻度是否是顺时针增长,默认 true。
                min: 0,                 // 最小的数据值,默认 0 。映射到 minAngle。
                max: 100,               // 最大的数据值,默认 100 。映射到 maxAngle。
                startAngle: 225,        // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                endAngle: -45,          // 仪表盘结束角度,默认 -45
                color: ['#6ab2ec', '#85a6a9', 'rba(37,66,144)']
            }]
        }

        let pie3Options = {
            grid: {
                left: '1%',
                right: '1%',
                bottom: '7%',
                containLabel: true
            },
            title: {
                text: `日出货完成率趋势图(${new Date().getMonth() + 1}月)`,
                textStyle: {
                    color: '#fff',
                    fontSize: 30
                },
            },
            xAxis: {
                type: 'category',
                data: getDaysInMonth(),
                //设置轴线的属性
                axisLine: {
                    lineStyle: {
                        color: '#6ab2ec',
                    }
                },
                axisLabel: {
                    fontSize: 22
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}%'
                },
                axisLine: {
                    lineStyle: {
                        color: '#6ab2ec',
                    }
                }
            },
            series: [{
                data: data.dailyProductionOutFinishedRateTrendOfCurrentMonth,
                type: 'line',
                smooth: true,
                symbol: 'circle', //拐点样式
                symbolSize: 12, //拐点大小
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            fontSize: 14
                        },
                        formatter: (params) => {
                            return params.value + '%';
                        }
                    },
                },
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 3,//折线宽度
                            color: "#fff"//折线颜色
                        },
                        // color: '#27dba0',//拐点颜色
                        color: '#6ab2ec',//拐点颜色
                        borderColor: '#fff',//拐点边框颜色
                        borderWidth: 3//拐点边框大小
                    },
                    emphasis: {
                        color: '#4CCEFE'//hover拐点颜色定义
                    }
                },
                areaStyle: {
                    color: 'rgb(173,232,163)', // 填充颜色
                    opacity: 0.4 // 填充透明度
                }
            }]
        };
        stockCompletionRateChart.setOption(pie1Options)
        stockOutRateChart.setOption(pie2Options)
        dailyStockOutFinishRateTrendChart.setOption(pie3Options)

        $(".loading").fadeOut();
    }
</script>
</body>
</html>